<template>
	<view>


		<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			duration="500">
			<!-- <swiper-item v-for="(item,index) in swiperList" :key="index"> -->
			<swiper-item>
				<!-- <image :src="" mode="aspectFill" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
					v-if="item.type=='video'"></video> -->
					<image :src="data.activity_img" mode="aspectFill"></image>
			</swiper-item>
		</swiper>



		<view class="header">
			<view class="price_share">
				<view class="title margin-left">{{data.activity_name}}</view>
			</view>
		</view>
		<view class="detail_title">
			<view class="t1"></view>
			<view class="t2"></view>
			<view class="t0">活动介绍</view>
			<view class="t2"></view>
			<view class="t1"></view>
		</view>



		<view class="margin-left">
			{{data.activity_summary}}
			<view class="margin-top">
				活动时间：{{data.activity_time}}<br />
				活动地点：{{data.location}}<br />
				联系电话：{{data.phone_number}}<br />
				主办单位：{{data.organizer}}<br />
				主办单位电话：{{data.organizer_phone}}<br />
				参与人数:{{data.participants_count}}<br />
				发布时长：{{data.publish_duration}}<br />
			</view>
		</view>



		
		<view class="cu-bar bg-white tabbar border shop foot">
			<button class="action" open-type="contact">
				<view class="cuIcon-service text-green">
					<view class="cu-tag badge"></view>
				</view> 客服
			</button>

			<view class="btn-group" style="margin-right: 10rpx;">
				<button class="cu-btn round shadow-blur" style="width: 350rpx; background-color: #994278;color: white;" @click="entry()">立即报名</button>
			</view>
		</view>

	</view>

</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				data: {},
			}
		},
		onLoad(opt) {
			console.log(opt)
			app.get("ApiActivityPublish/activitydetail", opt, (res) => {
				console.log(res)
				this.data = res.data
			})
			const date = new Date(this.data.activity_time); // 根据时间戳创建Date对象
			const year = date.getFullYear(); // 获取年份
			const month = date.getMonth() + 1; // 获取月份，需要加1
			const day = date.getDate(); // 获取日期
			const hour = date.getHours().toString().padStart(2, '0'); // 获取小时
			const minute = date.getMinutes().toString().padStart(2, '0'); // 获取分钟
			const second = date.getSeconds().toString().padStart(2, '0'); // 获取秒数

			const formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`; // 拼接成格式化后的日期字符串
			this.data.activity_time = formattedDate
		},
		methods: {
			entry(){
				uni.navigateTo({
					url:'/activity/operation/entry?id='+this.data.id+'&activity_img='+this.data.activity_img+'&activity_name='+this.data.activity_name
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}


	.header .price_share {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between
	}

	.header .price_share .price {
		display: flex;
		align-items: flex-end
	}

	.header .price_share .price .f1 {
		font-size: 50rpx;
		color: #51B539;
		font-weight: bold
	}

	.header .price_share .price .f2 {
		font-size: 26rpx;
		color: #C2C2C2;
		text-decoration: line-through;
		margin-left: 30rpx;
		padding-bottom: 5px
	}


	.header .title {
		color: #000000;
		font-size: 32rpx;
		line-height: 42rpx;
		font-weight: bold;
	}

	.header .price_share .title {
		display: flex;
		align-items: flex-end;
	}


	.detail_title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 60rpx;
		margin-bottom: 30rpx
	}

	.detail_title .t0 {
		font-size: 28rpx;
		font-weight: bold;
		color: #222222;
		margin: 0 20rpx
	}

	.detail_title .t1 {
		width: 12rpx;
		height: 12rpx;
		background: rgba(253, 74, 70, 0.2);
		transform: rotate(45deg);
		margin: 0 4rpx;
		margin-top: 6rpx
	}

	.detail_title .t2 {
		width: 18rpx;
		height: 18rpx;
		background: rgba(253, 74, 70, 0.4);
		transform: rotate(45deg);
		margin: 0 4rpx
	}
</style>